<template>
  <v-layout align-center justify-center column fill-height :style="{height:'80vh',backgroundColor:'#fafafa'}">
    <v-card :width="350">
      <v-container fluid grid-list-lg>
        <v-layout row wrap>
          <v-flex xs12>
            <v-layout align-center justify-space-around wrap>
              <v-avatar color="success">
                <v-icon color="#fafafa">account_circle</v-icon>
              </v-avatar>
            </v-layout>
            <v-flex class="text-xs-center">
              <h2>
                商户注册
              </h2>
              <v-alert :value="showAlert" color="error" icon="warning" transition="scale-transition" outline>
                手机号或密码错误
              </v-alert>
            </v-flex>
          </v-flex>
          <v-flex xs12>
            <v-form lazy-validation ref="form">
              <v-text-field v-model="storeName" :rules="storeNameRules" label="商户简称" validate-on-blur required></v-text-field>
              <v-text-field v-model="mobile" :rules="mobileRules" label="手机号" validate-on-blur required></v-text-field>
              <v-text-field v-model="verifyCode" :rules="verifyCodeRules" label="验证码" validate-on-blur required>
                <v-btn v-if="count>=59" slot="append-outer" flat color="primary" @click="getVerifyCode">获取验证码</v-btn>
                <v-btn v-else slot="append-outer" flat color="primary" disabled @click="getVerifyCode">{{count+"秒"}}</v-btn>
              </v-text-field>
              <v-text-field v-model="password" type="password" :rules="passwordRules" validate-on-blur label="密码" required></v-text-field>
              <v-text-field v-model="passwordConfirm" type="password" :rules="passwordConfirmRules" validate-on-blur label="确认密码" required></v-text-field>
              <v-radio-group row>
                <v-radio label="普通单店" value="radio-1"></v-radio>
                <v-radio label="连锁店" value="radio-2"></v-radio>
              </v-radio-group>
              <v-btn block color="info" @click="modifyPassword" :loading="loading">立即注册</v-btn>
            </v-form>
          </v-flex>
          <v-flex xs12>
            <v-layout row wrap justify-end>
              <v-btn flat right color="primary" to="/login">登陆<v-icon>keyboard_arrow_right</v-icon>
              </v-btn>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
    <p class="commpany-info">2018&copy;北京开心贝科技有限公司</p>
  </v-layout>
</template>
<script>
import MD5 from "js-md5";
let mobileReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
export default {
  data() {
    let verifyCodeTimestamp = window.localStorage.getItem(
      "registerVerifyCodeTimestamp"
    );
    let now = new Date().getTime();
    let countStore = 0;
    if (verifyCodeTimestamp == null) {
      verifyCodeTimestamp = now;
      countStore = 60;
    } else {
      countStore = 60 - ((now - verifyCodeTimestamp) / 1000).toFixed(0);
    }
    if (countStore < 0 || countStore >= 60) {
      countStore = 60;
    } else {
      this.timerCunter();
    }

    return {
      mobileError: false,
      count: countStore,
      loading: false,
      showAlert: false,
      storeName: "",
      storeNameRules: [
        v => !!v || "请输入商户简称 ",
        v => v.length > 1 || v.length < 11 || "商户简称1-10位"
      ],
      mobile: "",
      mobileRules: [
        v => !!v || "请输入手机号",
        v => mobileReg.test(v) || "手机号不正确"
      ],
      verifyCode: "",
      verifyCodeRules: [
        v => !!v || "请输入验证码 ",
        v => v.length == 4 || "验证码为4位"
      ],
      password: "",
      passwordRules: [
        v => !!v || "请输入密码 ",
        v => v.length > 5 || "密码最少6位"
      ],
      passwordConfirm: "",
      passwordConfirmRules: [
        v => !!v || "请输入密码 ",
        v => v.length > 5 || "密码最少6位",
        v => v === this.password || "2次输入的密码不一样"
      ]
    };
  },

  methods: {
    timerCunter() {
      let timer = setInterval(() => {
        if (this.count == 0) {
          this.count = 60;
          clearInterval(timer);
        }
        this.count--;
      }, 1000);
    },
    getVerifyCode() {
      if (this.mobile == null || !mobileReg.test(this.mobile)) {
        return;
      }
      this.$ajax
        .get("api/app/api/sms/store/verifyCode/" + this.mobile)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
      window.localStorage.setItem(
        "registerVerifyCodeTimestamp",
        new Date().getTime()
      );
      this.timerCunter();
    },
    modifyPassword() {
      if (this.$refs.form.validate()) {
        this.loading = true;
        this.$ajax
          .post("api/app/store/auth/modify/password", {
            telephone: this.mobile,
            password: MD5(this.password).toUpperCase(),
            verifyCode: this.verifyCode,
            passwordConfirm: MD5(this.passwordConfirm).toUpperCase()
          })
          .then(res => {
            if (res.status === 200) {
              this.loading = false;
            }
          })
          .catch(err => {
            this.loading = false;
          });
      }
    }
  }
};
</script>
<style scoped>
.commpany-info {
  margin-top: 48px;
  margin-bottom: 32px;
  color: rgba(0, 0, 0, 0.54);
  text-align: center;
}
</style>

